<template>
  <div class="quantity_content" v-loading="loading">
    <header>
      <el-form :model="form" label-width="auto" style="width: 100%; overflow: hidden">
        <el-row :gutter="40">
          <el-col :span="5">
            <el-form-item label="合同类型">
              <el-select v-model="form.contractType" clearable placeholder="请选择" style="width: 100%" @change="getList">
                <el-option
                  v-for="item in styleList"
                  :key="item.contractTypeId"
                  :label="item.contractTypeName"
                  :value="item.contractTypeId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态">
              <el-select v-model="form.status" clearable placeholder="请选择" style="width: 100%" @change="getList">
                <el-option v-for="item in statusList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单编码">
              <el-input clearable v-model="form.orderNo" style="width: 100%" placeholder="请输入" @change="getList" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="">
              <div class="jzt-flex-center" style="width: 100%">
                <el-input
                  clearable
                  v-model="form.searchContent"
                  style="width: 100%"
                  placeholder="请输入业主姓名、房屋地址、手机号"
                  :prefix-icon="Search"
                  @change="getList"
                />
                <el-button class="ml10" type="primary" plain :icon="RefreshRight" @click="reset">重置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </header>

    <div class="products-list mt20" style="overflow-x: auto">
      <div class="my-table" style="min-width: 1600px" v-if="list.length > 0">
        <div class="table-header">
          <div>
            <div class="row">
              <div class="col1">合同类型</div>
              <div class="col2">核量总金额</div>
              <div class="col2">后补订单编号</div>
              <div class="col3">时间</div>
              <div class="col4">状态</div>
              <div class="col5">核量变更单</div>
              <div class="col6">核量单审核备注</div>
              <div class="col4">操作</div>
            </div>
          </div>
        </div>

        <div class="table-body">
          <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="tips">
              <div class="left">
                <p>
                  合同主订单编号：
                  <span v-if="item.mainOrderNo" style="font-weight: bold">{{ item.mainOrderNo }}</span>
                  <span v-else style="font-weight: normal; color: #86909c">暂无生成订单编码</span>
                </p>
              </div>
              <div class="right">
                <p>
                  客户信息：<span> {{ item.customerName }} / {{ item.customerMobileCode }} / {{ item.customerAddress }} </span>
                </p>
              </div>
            </div>
            <div class="row">
              <div class="col1">
                <!-- 合同类型 -->
                {{ item.contractTypeName || "-" }}
              </div>
              <div class="col2">
                <!-- 核量金额 -->
                <div>
                  <p>¥{{ item.budgetTotlalMoney || "-" }}</p>
                  <span class="f12 mt8 jzt-block" v-if="item.nuclearType === 2">
                    变更金额：
                    <i class="red" v-if="item.changeMoney < 0">¥{{ item.changeMoney }}</i>
                    <i class="green" v-else>¥{{ item.changeMoney }}</i>
                  </span>
                </div>
              </div>
              <div class="col2">
                <!-- 后补订单编号 -->
                <p v-for="noStr in item.subOrderNoList" :key="noStr">{{ noStr }}</p>
                <span v-if="item.subOrderNoList?.length <= 0">-</span>
              </div>
              <div class="col3">
                <!-- 时间 -->
                {{ item.updateTime || "-" }}
              </div>
              <div class="col4">
                <!-- 状态 -->
                <el-tag v-if="item.status === 4" type="warning">待审核</el-tag>
                <el-tag v-else-if="item.status === 1" type="warning">待核量</el-tag>
                <el-tag v-else-if="item.status === 2" type="success">已核量</el-tag>
                <el-tag v-else-if="item.status === 3" type="danger">已拒绝</el-tag>
                <span v-else>-</span>
              </div>
              <div class="col5">
                <!-- 核量变更单 -->
                <template v-if="item.changeOrderVOList.length > 0">
                  <el-button
                    class="border change-id"
                    type="primary"
                    link
                    v-for="(_item, index) of item.changeOrderVOList || []"
                    :key="_item.nuclearId"
                  >
                    <p :title="_item.nuclearId" @click="getNuclearReplaceReturnOrderFun(_item)">
                      {{ _item.nuclearId }}
                    </p>
                  </el-button>
                </template>
                <span v-else>-</span>
              </div>
              <div class="col6">
                <!-- 核量单审核备注 -->
                {{ item.processRemark || "-" }}
              </div>
              <div class="col4">
                <div>
                  <el-button v-if="item.status === 1 || item.status === 4" type="primary" link @click="goDetail(item)">
                    立即核量
                  </el-button>
                  <el-button v-if="item.status === 2" type="primary" link @click="goDetail(item)">继续核量</el-button>
                  <el-button v-if="item.status === 3" type="primary" link @click="goDetail(item)">查看</el-button>
                  <el-button class="ml0" type="primary" v-if="item.haveCancelOrder === true" link @click="openRecord(item, 2)">
                    撤销核量单
                  </el-button>
                  <el-button class="ml0" type="primary" v-else-if="item.orderList.length > 0" link @click="openRecord(item, 1)">
                    订单记录
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="display: flex; justify-content: center; width: 100%">
        <el-empty description="这里暂时什么都没有" />
      </div>
    </div>

    <!-- 分页 -->
    <div class="pt20 pb20" style="display: flex; justify-content: flex-end">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :page-sizes="pagination.sizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 核量变更单-抽屉 -->
    <ChangeOrder ref="changeOrderRef" v-model:isOpen="_isOpen" :optionInfo="optionInfo" />

    <!-- 订单记录、撤销核量单-弹窗 -->
    <RecordList
      v-model:isOpen="_isOpenRecord"
      :optionInfo="optionInfoRecord"
      @cancelSuccess="refreshRecordList"
      @delSuccess="refreshRecordList"
    />
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import { Search, RefreshRight } from "@element-plus/icons-vue";
import useCodeArrStore from "@/store/modules/select";
import { getNuclearPageV2, getNuclearReplaceReturnOrder } from "@/apis/quantity";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import ChangeOrder from "./components/changeOrder.vue";
import { getContractTypeList } from "@/apis/budgetQuotation";
import RecordList from "./components/recordList.vue";

const changeOrderRef = ref();
const loading = ref(false);
const _isOpen = ref(false);
const _isOpenRecord = ref(false);
const form = ref({ status: null, searchContent: "", contractType: "" });
const styleList = ref([]);
const statusList = ref([
  { dictLabel: "待核量", dictValue: 1 },
  { dictLabel: "核量完成", dictValue: 2 },
  { dictLabel: "已拒绝", dictValue: 3 },
  { dictLabel: "待审核", dictValue: 4 }
]);
const list = ref([]);
const pagination = ref({
  page: 1,
  size: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 0
});
const optionInfo = ref({
  title: "",
  returnOrderObj: {},
  replaceOrderObj: {},
  isSpace: false
});
const optionInfoRecord = ref({ detail: [] });

onMounted(async () => {
  getContractTypeListFun(); //查询合同类型下拉列表
  getList();
});

/**撤销核量单成功、删除订单成功-记录单弹窗的回调 */
const refreshRecordList = async nuclearId => {
  await getList();
  const row = list.value.find(item => item.nuclearId === nuclearId);
  console.log("更新之后的row数据===", row);
  if (row) {
    optionInfoRecord.value.detail = [...row.orderList];
  }
};

/**
 *
 * @param type num 1-订单记录 2-撤销核量单
 */
const openRecord = (row, type) => {
  _isOpenRecord.value = true;
  optionInfoRecord.value.detail = [...row.orderList];
  optionInfoRecord.value.type = type;
  optionInfoRecord.value.nuclearId = row.nuclearId;
};

const reset = () => {
  form.value = { status: null, searchContent: "", contractType: "" };
  pagination.value.page = 1;
  getList();
};

/**查询核量变更单-抽屉数据 */
const getNuclearReplaceReturnOrderFun = row => {
  _isOpen.value = true;
  changeOrderRef.value.setLoading(true);
  getNuclearReplaceReturnOrder({ nuclearId: row.nuclearId }).then(res => {
    if (res.code === 200) {
      optionInfo.value.title = row.nuclearId;
      optionInfo.value.returnOrderObj = res.data.returnOrderDetailVO;
      optionInfo.value.replaceOrderObj = res.data.replacementOrderDetailVO;
      console.log("这是核量变更单信息===", res.data);
      changeOrderRef.value.setLoading(false);
    }
  });
};

/**查询合同类型下拉列表 */
const getContractTypeListFun = () => {
  getContractTypeList().then(res => {
    if (res.code === 200) {
      styleList.value = res.data;
    }
  });
};
/**根据合同类型id返回合同类型中文 */
const getTypeName = contractTypeId => {
  const obj = styleList.value.find(item => item.contractTypeId === contractTypeId);
  return obj?.contractTypeName || "-";
};

const goDetail = item => {
  router.push({
    path: "/quantity/deatil",
    query: {
      contractId: item.contractId,
      nuclearId: item.nuclearId,
      nuclearType: item.nuclearType
    }
  });
};

const getList = async () => {
  // return;
  loading.value = true;
  await getNuclearPageV2({
    ...form.value,
    page: pagination.value.page,
    size: pagination.value.size
  })
    .then(res => {
      if (res.code === 200) {
        list.value = res.data.records;
        pagination.value.total = res.data.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSizeChange = val => {
  pagination.value.size = val;
  getList();
};
const handleCurrentChange = val => {
  pagination.value.page = val;
  getList();
};
</script>

<style lang="scss" scoped>
:deep(.change-id) {
  width: 100%;
  & > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }
  }
}
:deep(.el-button.border) {
  & > span {
    p {
      border-bottom: 1px solid #007dff;
    }
    b {
      font-weight: normal;
    }
  }
}
.info {
  display: flex;
  .left {
    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }
  .right {
    padding-left: 18px;
    .name {
      font-size: 14px;
      color: #3d3d3d;
      margin-bottom: 5px;
    }
    p {
      font-size: 12px;
      color: #86909c;
      margin-bottom: 5px;
    }
  }
}
.quantity_content {
  padding: 0 20px;
  height: calc(100% - 0px);
  overflow-y: auto;
  & > header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 22;
    background-color: white;
    margin: 0 -20px;
    border-radius: 10px 10px 0 0;
    :deep(.el-form-item) {
      margin-bottom: 0;
      .el-form-item__label-wrap {
        margin-left: 0 !important;
      }
    }
    h3 {
      font-size: 18px;
      font-weight: normal;
      position: relative;
      padding-left: 14px;
      &::before {
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        top: 8px;
        left: 0;
        background-color: #409eff;
      }
    }
  }
  .center-search-wrap {
    background-color: #f6f8fa;
    padding: 0 20px 0 20px;
    margin-top: 20px;
    :deep(.el-input-group__append) {
      padding: 0 !important;
    }
    & > div {
      // display: flex;
      // justify-content: space-between;
      padding: 20px 0 2px 0;
    }
    :deep(.el-form) {
      flex: 1;
    }
    .btn-wrap {
      width: 80px;
    }
  }
}
.products-list {
  .table-header {
    background-color: #f2f6fc;
    margin-bottom: 10px;
  }
  .table-body {
    max-height: calc(100vh - 345px);
    .green {
      color: #00b42a;
    }
    .red {
      color: #ff3333;
    }
    // overflow: auto;
    .list-item {
      margin-bottom: 10px;
      & > div {
        border: 1px solid #e1e6ed;
        display: flex;
        &:not(.row) {
          // border-left: none;
        }
        &.row {
          & > div:not(:last-of-type) {
            border-right: 1px solid #e1e6ed;
          }
        }
        & > div {
          display: flex;
          align-items: center;
        }
      }
      .col1 {
        min-width: 200px;
        & > div {
          display: flex;
        }

        .left {
          img {
            width: 80px;
            height: 80px;
            border-radius: 4px;
          }
        }
        .right {
          padding-left: 18px;
          .name {
            font-size: 14px;
            color: #3d3d3d;
            margin-bottom: 5px;
          }
          p {
            font-size: 12px;
            color: #86909c;
            margin-bottom: 5px;
          }
        }
      }
      .tips {
        display: flex;
        justify-content: space-between;
        padding: 8px 20px;
        border-bottom: none;
        background-color: #f5f7fa;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        .left {
          font-weight: bold;
          p > span {
            font-weight: normal;
          }
        }
        p.label {
          width: 72px;
        }
        .el-input {
          flex: 1;
          .el-input__wrapper {
            background-color: #f2f3f5;
          }
        }
      }
    }
  }
  .table-header,
  .table-body {
    & > div > div.row {
      display: flex;
      justify-content: space-between;
      & > div {
        padding: 14px 20px;
        display: flex;
        flex-wrap: wrap;
        &.col1 {
          // width: 45%;
          flex: 1;
          min-width: 200px;
        }
        &.col5 {
          .el-button {
            margin-left: 0;
          }
        }

        &.col4 {
          width: 110px;
          min-width: 110px;
          max-width: 110px;
          box-sizing: border-box;
        }
        &.col5 {
          width: 210px;
          min-width: 210px;
          max-width: 210px;
          box-sizing: border-box;
        }
        &.col6 {
          width: 360px;
          min-width: 210px;
          max-width: 360px;
          box-sizing: border-box;
        }
        &.col2,
        &.col3 {
          width: 200px;
          min-width: 200px;
          max-width: 200px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
